<template>
	<div 
	  class="swiper-container" 
	  ref='mySwiper' 
	  @mouseenter="autoplaySwiper.autoplay.stop()"
	  @mouseleave="autoplaySwiper.autoplay.start()"
	  >
	  <div class="swiper-wrapper">
	    <template v-for='item in floorData'>
	      <div class="swiper-slide" :key='item.id'>
	        <img style="width: 100%;height: 100%;" :src='item.imgUrl' alt="图片加载失败">
	        <!-- || "@/assets/images/home/banner1.jpg" -->
	      </div>
	    </template>  
	  </div>       
	   <!-- 如果需要分页器 -->
	  <div class="swiper-pagination"></div>       
	</div>
</template>

<script>
import Swiper from 'swiper'; 
import 'swiper/css/swiper.min.css';

export default{
	name:'Slide',
	// 监听数据
	props:{
		floorData:{
			type:Array,
			default:()=>[]
		}
	},
	data(){
		return {
			autoplaySwiper:null,
		}
	},
	// 不能使用mouted ，数据渲染后不能轮播
	// 使用watch监听，floorData 变化后在渲染
	watch:{
		floorData:{
			handler(newVal,oldVal) {
     		 	console.log('floor',this.floorData);
			    // 初始化轮播图,轮播列表的数据还未渲染 this.$nextTick()等待页面渲染后
				this.$nextTick( ()=>{
				      this.autoplaySwiper = new Swiper(this.$refs.mySwiper,{
				        loop:true,
				        // 自动轮播
				        autoplay: {
				          delay: 2000,
				          disableOnInteraction: false,
				        },
				        // 轮播图切换效果
				        effect:'fade',
				        // 分页器
				        pagination: {
				          el: '.swiper-pagination',
				          clickable:true
				        },         
				      })
				})
      		},
			immediate:true
		}
	}
}
</script>

<style lang="scss" scoped>
.swiper-container{
  width: 100%;
  height: 100%;
  .swiper{
    --swiper-pagination-color: #99999;/* 两种都可以 */
  }
}
</style>


<!-- 
handler(){
				console.log('floor',this.floorData);
			    // 初始化轮播图,轮播列表的数据还未渲染 this.$nextTick()等待页面渲染后
				this.$nextTick( ()=>{
				      this.autoplaySwiper = new Swiper(this.$refs.mySwiper,{
				        loop:true,
				        // 自动轮播
				        autoplay: {
				          delay: 2000,
				          disableOnInteraction: false,
				        },
				        // 轮播图切换效果
				        effect:'fade',
				        // 分页器
				        pagination: {
				          el: '.swiper-pagination',
				          clickable:true
				        },         
				      })
				})
			},
			immediate:true
 -->